<template>
  <div class="index-container">
    <div :style="'height:' + split_height + 'px'">
      <Split v-model="split" mode="vertical" on-moving="split_change">
        <div slot="top" class="demo-split-pane">
          <RayTable :menu="menu" :data_object_no="menu.data_object_no" :height="parent_height" @ray-table-cell-click="getSonDatas"/>
        </div>
        <div slot="bottom" class="demo-split-pane">
          <RayTable ref="sonTable" :menu="menu" :data_object_no="menu.son_data_object_no" :height="son_height" :precondition="precondition" :auto_load="false" />
        </div>
      </Split>
    </div>
  </div>
</template>

<script>
import RayTable from '@/views/template/components/rayTable.vue'

export default {
  name: 'Zz',
  components: {
    RayTable
  },
  data() {
    return {
      split: 0.5,
      split_height: '',
      son_height: '',
      parent_height: 0,
      precondition:{}
    }
  },
  watch: {
    split: function() {
      this.split_height = document.documentElement.clientHeight - 250
      this.parent_height = this.split_height * this.split
      this.son_height = this.split_height * (1 - this.split)
    }
  },
  created() {
    this.menu = this.$route.meta.query
    this.split_height = document.documentElement.clientHeight - 250
    this.parent_height = this.split_height * this.split
    this.son_height = this.split_height * (1 - this.split)
  },
  methods: {
    getSonDatas(row){
      this.precondition[this.menu.son_id_field] = row[this.menu.parent_id_field]
      this.$refs.sonTable.getData()
    }
  }
}
</script>

<style></style>
